<script setup>
import {UploadFilled} from '@element-plus/icons-vue'
import {reactive, ref, onUnmounted, onMounted, computed} from "vue";
import {ElMessage} from "element-plus";
import axios from 'axios'; // Import axios for API calls
import { useRouter } from 'vue-router';

const ruleFormRef = ref()
const courseId = ref('') // Store current course ID
const analysisData = ref(null) // Store analysis results
const loading = ref(false)
const videoType = ref('teacher') // Default is teacher video
// Dev mode flag - set to true to use mock data when API is not available
const DEV_MODE = ref(true) // Toggle to false in production

// Video processing status tracking
const teacherProcessingStatus = ref(null)
const studentProcessingStatus = ref(null)
const statusInterval = ref(null) // For interval timer
const processingComplete = ref({
  teacher: false,
  student: false
})

// Computed properties for button control
const hasTeacherVideo = computed(() => {
  return teacherProcessingStatus.value !== null;
})

const hasStudentVideo = computed(() => {
  return studentProcessingStatus.value !== null;
})

const bothVideosUploaded = computed(() => {
  return hasTeacherVideo.value && hasStudentVideo.value;
})

const teacherVideoProcessed = computed(() => {
  return processingComplete.value.teacher && 
         teacherProcessingStatus.value && 
         teacherProcessingStatus.value.progress === 100 &&
         teacherProcessingStatus.value.status === 'COMPLETED';
})

const studentVideoProcessed = computed(() => {
  return processingComplete.value.student &&
         studentProcessingStatus.value && 
         studentProcessingStatus.value.progress === 100 &&
         studentProcessingStatus.value.status === 'COMPLETED';
})

const bothVideosProcessed = computed(() => {
  return teacherVideoProcessed.value && studentVideoProcessed.value;
})

const processingInProgress = computed(() => {
  if (!hasTeacherVideo.value && !hasStudentVideo.value) return false;
  return !bothVideosProcessed.value;
})

const canEndCourse = computed(() => {
  const result = bothVideosUploaded.value && bothVideosProcessed.value;
  console.log('是否可以结束课程:', result);
  console.log('教师视频已处理:', teacherVideoProcessed.value);
  console.log('学生视频已处理:', studentVideoProcessed.value);
  return result;
})

// Status message computed property
const processingStatusMessage = computed(() => {
  if (processingInProgress.value) {
    return '视频处理中，请等待处理完成后再结束课程';
  }
  if (!hasTeacherVideo.value) {
    return '请上传教师视频';
  }
  if (!hasStudentVideo.value) {
    return '请上传学生视频';
  }
  if (bothVideosProcessed.value) {
    return '视频处理完成，可以结束课程';
  }
  return '';
})

// Check for existing course ID in local storage (for page refresh scenarios)
onMounted(() => {
  // Removed localStorage retrieval code
})

// Form for starting a new course
const courseForm = reactive({
  teacher: '',
  courseName: '',
  className: ''
})

// Validation rules
const rules = reactive({
  teacher: [
    {
      required: true,
      message: '请选择授课教师',
      trigger: 'change',
    },
  ],
  courseName: [
    {
      required: true,
      message: '请输入课程名称',
      trigger: 'blur', 
    },
  ],
  className: [
    {
      required: true,
      message: '请选择班级',
      trigger: 'change',
    },
  ],
})

// Teacher options
const teachers = [
  { value: '学哥', label: '学哥' },
  { value: '王老师', label: '王老师' },
  { value: '李老师', label: '李老师' },
  { value: '张老师', label: '张老师' },
]

// Class options
const classes = [
  { value: '本生砖3班', label: '本生砖3班' },
  { value: '本生砖2班', label: '本生砖2班' },
  { value: '本生砖1班', label: '本生砖1班' },
  { value: '计算机科学1班', label: '计算机科学1班' },
  { value: '计算机科学2班', label: '计算机科学2班' },
]

// Reset form
const resetForm = () => {
  ruleFormRef.value.resetFields()
}

// For debugging form values
const logFormValues = () => {
  console.log('courseForm values:', {
    teacher: courseForm.teacher,
    courseName: courseForm.courseName,
    className: courseForm.className
  })
}

// API 1: Start a course - improved validation
const startCourse = async () => {
  // Log form values for debugging
  logFormValues()
  
  // First validate the form normally
  ruleFormRef.value.validate(async (valid, fields) => {
    if (!valid) {
      console.error('表单验证失败:', fields)
      // Show more specific error information
      const fieldNames = Object.keys(fields).map(key => {
        if (key === 'teacher') return '授课教师'
        if (key === 'courseName') return '课程名称'
        if (key === 'className') return '班级'
        return key
      }).join('、')
      ElMessage.error(`请检查${fieldNames}字段是否填写正确`)
      return
    }
    
    try {
      loading.value = true
      
      // For development - use mock success response if API is not available yet
      if (DEV_MODE.value) {
        console.log('使用模拟数据')
        // Simulate API success
        await new Promise(resolve => setTimeout(resolve, 500))
        courseId.value = Math.floor(Math.random() * 1000)
        // Removed localStorage storage
        ElMessage.success('课程创建成功')
        loading.value = false
        return
      }
      
      // Actual API call
      console.log('发送请求数据:', {
        teacher: courseForm.teacher,
        courseName: courseForm.courseName,
        className: courseForm.className
      })
      
      try {
        const response = await axios.post('/api/admin/course/start', {
          teacher: courseForm.teacher,
          courseName: courseForm.courseName,
          className: courseForm.className
        })

        console.log('API响应:', response)
        
        if (response.data.code === '200') {
          ElMessage.success('课程创建成功')
          courseId.value = response.data.data // Get courseId from response
          // Removed localStorage storage
        } else {
          ElMessage.error('课程创建失败: ' + (response.data.msg || '未知错误'))
        }
      } catch (apiError) {
        console.error('API调用失败:', apiError)
        
        // Development fallback - pretend success if API fails
        if (DEV_MODE.value) {
          courseId.value = 999 // Mock ID
          // Removed localStorage storage
          ElMessage.success('开发模式: 课程创建成功')
        } else {
          ElMessage.error('请求失败，请检查网络连接: ' + apiError.message)
        }
      }
    } finally {
      loading.value = false
    }
  })
}

// API 2: Upload video
const handleUploadSuccess = (response) => {
  if (response.code === '200') {
    ElMessage.success('视频上传成功，正在处理中...')
    // Start polling for video processing status
    startPollingStatus()
  } else {
    ElMessage.error('视频上传失败: ' + response.msg)
  }
}

// Start polling for video processing status
const startPollingStatus = () => {
  // Clear existing interval if it exists
  if (statusInterval.value) {
    clearInterval(statusInterval.value)
  }
  
  // Reset completion status when starting new polling
  processingComplete.value = {
    teacher: false,
    student: false
  }
  
  console.log('开始轮询视频处理状态...');
  
  // Immediately check status once before starting interval
  if (courseId.value) {
    fetchProcessingStatus('teacher');
    fetchProcessingStatus('student');
  }
  
  // Start a new polling interval
  statusInterval.value = setInterval(() => {
    if (courseId.value) {
      console.log('轮询检查视频处理状态...');
      // Only poll for types that aren't complete yet
      if (!processingComplete.value.teacher) {
        fetchProcessingStatus('teacher')
      }
      if (!processingComplete.value.student) {
        fetchProcessingStatus('student')
      }
      
      // If both are complete, stop polling
      if (processingComplete.value.teacher && processingComplete.value.student) {
        console.log('所有视频处理完成，停止轮询');
        stopPollingStatus()
      }
    }
  }, 2000) // Poll every 2 seconds for faster updates
}

// Fetch processing status
const fetchProcessingStatus = async (type) => {
  if (!courseId.value) return
  
  try {
    // For development mode
    if (DEV_MODE.value) {
      // Simulate processing status
      const mockStatus = {
        courseId: courseId.value,
        type: type,
        status: 'PROCESSING',
        progress: 0,
        errorMessage: null,
        createTime: new Date().toISOString(),
        updateTime: new Date().toISOString()
      }
      
      // Get current status
      const currentStatus = type === 'teacher' ? teacherProcessingStatus.value : studentProcessingStatus.value
      
      if (!currentStatus) {
        // If no current status, start with a random progress
        mockStatus.progress = Math.floor(Math.random() * 20)
      } else if (currentStatus.status === 'COMPLETED') {
        // If already completed, maintain that state
        mockStatus.status = 'COMPLETED'
        mockStatus.progress = 100
        processingComplete.value[type] = true
      } else if (currentStatus.status === 'ERROR') {
        // If error, maintain that state
        mockStatus.status = 'ERROR'
        mockStatus.progress = currentStatus.progress
        mockStatus.errorMessage = currentStatus.errorMessage
        processingComplete.value[type] = true
      } else {
        // Otherwise, increase progress
        mockStatus.progress = Math.min(currentStatus.progress + Math.floor(Math.random() * 10 + 5), 99)
        
        // Simulate completion after reaching high progress
        if (mockStatus.progress > 95) {
          // 90% chance to complete, 10% chance to fail with error
          if (Math.random() > 0.1) {
            mockStatus.status = 'COMPLETED'
            mockStatus.progress = 100
          } else {
            mockStatus.status = 'ERROR'
            mockStatus.errorMessage = '处理视频时出现问题，请重新上传'
          }
          processingComplete.value[type] = true
        }
      }
      
      if (type === 'teacher') {
        teacherProcessingStatus.value = mockStatus
      } else {
        studentProcessingStatus.value = mockStatus
      }
      
      return
    }
    
    // Actual API call to fetch status from video_processing_status table
    const response = await axios.get(`/api/admin/video/status?courseId=${courseId.value}&type=${type}`)
    console.log(`获取${type}视频处理状态:`, response.data)
    
    if (response.data.code === '200') {
      const status = response.data.data
      
      if (type === 'teacher') {
        teacherProcessingStatus.value = status
      } else {
        studentProcessingStatus.value = status
      }
      
      // Only mark as complete if status is COMPLETED and progress is 100%
      if (status.status === 'COMPLETED' && status.progress === 100) {
        processingComplete.value[type] = true
        console.log(`${type}视频处理完成`)
      } else if (status.status === 'ERROR') {
        // Also mark as complete if there's an error, but user will need to reupload
        processingComplete.value[type] = true
        console.log(`${type}视频处理失败: ${status.errorMessage}`)
      } else {
        processingComplete.value[type] = false
        console.log(`${type}视频处理中: ${status.progress}%`)
      }
    }
  } catch (error) {
    console.error(`获取${type}视频处理状态失败:`, error)
  }
}

// Stop polling for status
const stopPollingStatus = () => {
  if (statusInterval.value) {
    clearInterval(statusInterval.value)
    statusInterval.value = null
  }
}

// Clean up on component unmount
onUnmounted(() => {
  stopPollingStatus()
})

// Custom upload method for videos
const uploadVideo = (params) => {
  if (!courseId.value) {
    ElMessage.warning('请先创建课程')
    return
  }

  // Create form data
  const formData = new FormData()
  formData.append('video', params.file)
  formData.append('courseId', courseId.value)
  formData.append('type', videoType.value)

  console.log('上传视频:', {
    courseId: courseId.value,
    type: videoType.value,
    fileName: params.file.name
  })

  // DEVELOPMENT MODE - mock success if API not available
  if (DEV_MODE.value) {
    setTimeout(() => {
      params.onSuccess({ code: '200', msg: '成功', data: '视频已接收，正在处理中...' })
    }, 1000)
    return
  }

  // Upload video
  axios.post('/api/admin/video/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: (progressEvent) => {
      params.onProgress({ percent: (progressEvent.loaded / progressEvent.total) * 100 })
    }
  }).then(response => {
    console.log('视频上传响应:', response.data)
    params.onSuccess(response.data)
  }).catch(error => {
    console.error('视频上传失败:', error)
    
    // Development fallback
    if (DEV_MODE.value) {
      params.onSuccess({ code: '200', msg: '成功', data: '开发模式: 视频已接收' })
    } else {
      params.onError(error)
    }
  })
}

// Before upload hook - validate course ID
const beforeUpload = (file) => {
  if (!courseId.value) {
    ElMessage.warning('请先创建课程')
    return false
  }
  return true
}

// API 3: End course
const router = useRouter()
const endCourse = async () => {
  if (!courseId.value) {
    ElMessage.warning('请先创建课程')
    return
  }
  
  // Check if both videos have been processed
  if (!canEndCourse.value) {
    ElMessage.warning('请等待所有视频处理完成后再结束课程')
    return
  }

  try {
    loading.value = true
    console.log('结束课程:', courseId.value)
    
    // DEVELOPMENT MODE
    if (DEV_MODE.value) {
      await new Promise(resolve => setTimeout(resolve, 500))
      ElMessage.success('开发模式: 课程已结束，正在分析视频...')
      await getAnalysisResult()
      router.push('/tabus/classroom-analysis-records')
      return
    }
    
    // Call end course API
    const response = await axios.post(`/api/admin/course/end?courseId=${courseId.value}`)
    console.log('结束课程响应:', response.data)
    
    if (response.data.code === '200') {
      ElMessage.success('课程已结束，正在分析视频...')
      // Get analysis results after ending course
      await getAnalysisResult()
      router.push('/tabus/classroom-analysis-records')
    } else {
      ElMessage.error('结束课程失败: ' + response.data.msg)
    }
  } catch (error) {
    console.error('结束课程失败:', error)
    
    // Development fallback
    if (DEV_MODE.value) {
      ElMessage.success('开发模式: 课程已结束')
      await getAnalysisResult()
      router.push('/tabus/classroom-analysis-records')
    } else {
      ElMessage.error('结束课程失败: ' + error.message)
    }
  } finally {
    loading.value = false
  }
}

// API 4: Get analysis results
const getAnalysisResult = async () => {
  if (!courseId.value) {
    ElMessage.warning('请先创建并结束课程')
    return
  }
  
  // Check if both videos have been processed
  if (!canEndCourse.value) {
    ElMessage.warning('请等待所有视频处理完成后再查看分析结果')
    return
  }

  try {
    loading.value = true
    console.log('获取分析结果:', courseId.value)
    
    // DEVELOPMENT MODE
    if (DEV_MODE.value) {
      await new Promise(resolve => setTimeout(resolve, 500))
      analysisData.value = {
        id: courseId.value,
        courseId: courseId.value,
        studentRaiseRate: 85,
        studentLowerRate: 15,
        teacherHappinessAvg: 77.03,
        teacherAngerAvg: 0.05,
        teacherNeutralAvg: 22.92
      }
      ElMessage.success('开发模式: 获取分析结果成功')
      return
    }
    
    // Call analysis API
    const response = await axios.get(`/api/admin/analysis/${courseId.value}`)
    console.log('分析结果响应:', response.data)
    
    if (response.data.code === '200') {
      analysisData.value = response.data.data
      ElMessage.success('获取分析结果成功')
    } else {
      ElMessage.error('获取分析结果失败: ' + response.data.msg)
    }
  } catch (error) {
    console.error('获取分析结果失败:', error)
    
    // Development fallback
    if (DEV_MODE.value) {
      // Mock analysis data
      analysisData.value = {
        id: courseId.value,
        courseId: courseId.value,
        studentRaiseRate: 85,
        studentLowerRate: 15,
        teacherHappinessAvg: 77.03,
        teacherAngerAvg: 0.05,
        teacherNeutralAvg: 22.92
      }
      ElMessage.success('开发模式: 获取分析结果成功')
    } else {
      ElMessage.error('获取分析结果失败: ' + error.message)
    }
  } finally {
    loading.value = false
  }
}

// 自定义进度条颜色
const customProgressBarColor = (percentage) => {
  if (percentage < 30) {
    return '#909399'; // 灰色
  } else if (percentage < 70) {
    return '#e6a23c'; // 黄色
  } else if (percentage < 100) {
    return '#409eff'; // 蓝色
  } else {
    return '#67c23a'; // 绿色
  }
}

// 新增：课程选择相关
const courseList = ref([])
const courseSelectDialog = ref(false)
const selectedCourse = ref({ courseName: '', teacher: '', className: '', id: '' })

const fetchCourseList = async () => {
  const res = await axios.get('/api/admin/course/list')
  if (res.data && res.data.code === '200') {
    courseList.value = res.data.data
  }
}

const openCourseSelect = async () => {
  await fetchCourseList()
  courseSelectDialog.value = true
}

const handleCourseSelect = (row) => {
  selectedCourse.value = {
    courseName: row.courseName,
    teacher: row.teacher,
    className: row.className,
    id: row.id
  }
  courseForm.courseName = row.courseName
  courseForm.teacher = row.teacher
  courseForm.className = row.className
  courseId.value = row.id
  courseSelectDialog.value = false
}
</script>

<template>
  <div>
    <div class="classroom">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>课堂分析</span>
            <el-switch 
              v-model="DEV_MODE" 
              active-text="开发模式" 
              inactive-text="生产模式"
              style="margin-left: 20px;"
            />
            <el-button
              type="primary"
              size="small"
              style="margin-left: 20px;"
              @click="$router.push('/tabus/classroom-analysis-records')"
            >
              查看历史记录
            </el-button>
          </div>
        </template>

        <!-- Step 1: Select course -->
        <h3>第一步：选择课程</h3>
        <div class="form-row">
          <el-button type="primary" @click="openCourseSelect">选择课程</el-button>
          <div v-if="selectedCourse.courseName" style="margin-left: 20px;">
            <span>课程名称：{{ selectedCourse.courseName }}</span>
            <span style="margin-left: 20px;">教师：{{ selectedCourse.teacher }}</span>
            <span style="margin-left: 20px;">班级：{{ selectedCourse.className }}</span>
          </div>
        </div>
        <el-dialog v-model="courseSelectDialog" title="选择课程" width="700px">
          <el-table :data="courseList" @row-dblclick="handleCourseSelect" highlight-current-row style="width: 100%;">
            <el-table-column prop="courseName" label="课程名称" align="center" />
            <el-table-column prop="teacher" label="教师" align="center" />
            <el-table-column prop="className" label="班级" align="center" />
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-button size="small" type="primary" @click="handleCourseSelect(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        
        <!-- Display current course ID -->
        <div v-if="courseId" class="course-info">
          <el-alert
            title="课程已创建"
            type="success"
            :closable="false"
            show-icon
          >
            <template #default>
              当前课程ID: {{ courseId }}
            </template>
          </el-alert>
        </div>

        <!-- Step 2: Upload videos -->
        <div v-if="courseId" class="form-section">
          <h3>第二步：上传视频</h3>
          <div class="video-type-selector">
            <el-radio-group v-model="videoType">
              <el-radio-button label="teacher">教师视频</el-radio-button>
              <el-radio-button label="student">学生视频</el-radio-button>
            </el-radio-group>
          </div>
          
          <!-- Upload status summary -->
          <div class="upload-status-summary">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-tag 
                  :type="hasTeacherVideo ? 
                    (processingComplete.teacher ? 'success' : 'warning') : 'info'"
                  effect="dark"
                  size="large"
                  class="status-tag"
                >
                  教师视频: {{ 
                    !hasTeacherVideo ? '未上传' : 
                    (processingComplete.teacher ? '处理完成' : '处理中') 
                  }}
                </el-tag>
              </el-col>
              <el-col :span="12">
                <el-tag 
                  :type="hasStudentVideo ? 
                    (processingComplete.student ? 'success' : 'warning') : 'info'"
                  effect="dark"
                  size="large"
                  class="status-tag"
                >
                  学生视频: {{ 
                    !hasStudentVideo ? '未上传' : 
                    (processingComplete.student ? '处理完成' : '处理中') 
                  }}
                </el-tag>
              </el-col>
            </el-row>
          </div>
          
          <!-- Processing status display -->
          <div v-if="teacherProcessingStatus || studentProcessingStatus" class="processing-status">
            <!-- Teacher video processing status -->
            <div v-if="teacherProcessingStatus" class="status-item">
              <h4>教师视频处理状态 <span class="progress-percent">{{ teacherProcessingStatus.progress }}%</span></h4>
              <el-progress 
                :percentage="teacherProcessingStatus.progress" 
                :status="teacherProcessingStatus.status === 'COMPLETED' ? 'success' : 
                         teacherProcessingStatus.status === 'ERROR' ? 'exception' : ''"
                :stroke-width="20"
                :color="customProgressBarColor(teacherProcessingStatus.progress)"
              />
              <div class="status-text">
                状态: 
                <span :class="'status-' + teacherProcessingStatus.status.toLowerCase()">
                  {{ 
                    teacherProcessingStatus.status === 'PENDING' ? '等待处理' : 
                    teacherProcessingStatus.status === 'PROCESSING' ? '处理中' : 
                    teacherProcessingStatus.status === 'COMPLETED' ? '处理完成' : 
                    '处理失败'
                  }}
                </span>
                <span v-if="teacherProcessingStatus.errorMessage" class="error-message">
                  错误信息: {{ teacherProcessingStatus.errorMessage }}
                </span>
              </div>
            </div>
            
            <!-- Student video processing status -->
            <div v-if="studentProcessingStatus" class="status-item">
              <h4>学生视频处理状态 <span class="progress-percent">{{ studentProcessingStatus.progress }}%</span></h4>
              <el-progress 
                :percentage="studentProcessingStatus.progress" 
                :status="studentProcessingStatus.status === 'COMPLETED' ? 'success' : 
                         studentProcessingStatus.status === 'ERROR' ? 'exception' : ''"
                :stroke-width="20"
                :color="customProgressBarColor(studentProcessingStatus.progress)"
              />
              <div class="status-text">
                状态: 
                <span :class="'status-' + studentProcessingStatus.status.toLowerCase()">
                  {{ 
                    studentProcessingStatus.status === 'PENDING' ? '等待处理' : 
                    studentProcessingStatus.status === 'PROCESSING' ? '处理中' : 
                    studentProcessingStatus.status === 'COMPLETED' ? '处理完成' : 
                    '处理失败'
                  }}
                </span>
                <span v-if="studentProcessingStatus.errorMessage" class="error-message">
                  错误信息: {{ studentProcessingStatus.errorMessage }}
                </span>
              </div>
            </div>
          </div>
          
          <div class="classroom-upload">
            <el-upload
                class="upload-demo"
                drag
                :http-request="uploadVideo"
                :before-upload="beforeUpload"
                :on-success="handleUploadSuccess"
                multiple
            >
              <el-icon class="el-icon--upload">
                <upload-filled/>
              </el-icon>
              <div class="el-upload__text">
                拖拽上传或 <em>点击上传</em> {{ videoType === 'teacher' ? '教师' : '学生' }}视频
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  支持 mp4, avi 等常见视频格式
                </div>
              </template>
            </el-upload>
          </div>
        </div>
        
        <!-- Step 3: End course and get analysis -->
        <div v-if="courseId" class="form-section">
          <h3>第三步：结束课程并查看分析</h3>
          
          <!-- Processing status message -->
          <div v-if="processingStatusMessage" class="processing-message-container">
            <el-alert
              :type="canEndCourse ? 'success' : 'warning'"
              :closable="false"
              show-icon
            >
              {{ processingStatusMessage }}
            </el-alert>
          </div>
          
          <div class="button-group">
            <el-button 
              type="danger" 
              @click="endCourse" 
              :loading="loading"
              :disabled="!canEndCourse"
              :title="canEndCourse ? '' : '请先上传并处理完成教师和学生视频'"
            >结束课程</el-button>
            <el-button 
              type="primary" 
              @click="getAnalysisResult" 
              :loading="loading"
              :disabled="!canEndCourse"
              :title="canEndCourse ? '' : '请先上传并处理完成教师和学生视频'"
            >查看分析结果</el-button>
          </div>
        </div>
        
        <!-- Analysis results display -->
        <div v-if="analysisData" class="analysis-results">
          <h3>课堂分析结果</h3>
          <el-descriptions border>
            <el-descriptions-item label="课程ID">{{ analysisData.courseId }}</el-descriptions-item>
            <el-descriptions-item label="学生举手率">{{ analysisData.studentRaiseRate }}%</el-descriptions-item>
            <el-descriptions-item label="学生低头率">{{ analysisData.studentLowerRate }}%</el-descriptions-item>
            <el-descriptions-item label="教师平均快乐度">{{ analysisData.teacherHappinessAvg.toFixed(2) }}%</el-descriptions-item>
            <el-descriptions-item label="教师平均愤怒度">{{ analysisData.teacherAngerAvg.toFixed(2) }}%</el-descriptions-item>
            <el-descriptions-item label="教师平均中性度">{{ analysisData.teacherNeutralAvg.toFixed(2) }}%</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.classroom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
}

.card-header {
  display: flex;
  align-items: center;
}

.classroom-upload {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.classroom-upload :deep(.upload-demo) {
  flex: 1;
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

.processing-status {
  margin: 20px 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px;
  background-color: #f8f9fa;
}

.status-item {
  margin-bottom: 15px;
}

.status-item:last-child {
  margin-bottom: 0;
}

.status-text {
  margin-top: 5px;
  font-size: 14px;
}

.status-pending {
  color: #909399;
}

.status-processing {
  color: #409eff;
}

.status-completed {
  color: #67c23a;
}

.status-error {
  color: #f56c6c;
}

.error-message {
  display: block;
  color: #f56c6c;
  margin-top: 5px;
}

.course-info {
  margin: 20px 0;
}

.form-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.analysis-results {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.video-type-selector {
  margin-bottom: 15px;
}

.upload-status-summary {
  margin: 15px 0;
}

.status-tag {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.processing-message-container {
  margin-bottom: 15px;
}

.progress-percent {
  float: right;
  font-weight: bold;
  font-size: 16px;
  color: #409eff;
}

.status-completed .progress-percent {
  color: #67c23a;
}

.status-error .progress-percent {
  color: #f56c6c;
}

/* Make the progress bars more visible */
:deep(.el-progress-bar__outer) {
  background-color: #e9ecef;
}

:deep(.el-progress-bar__inner) {
  transition: width 0.8s ease;
}

:deep(.el-progress__text) {
  font-weight: bold;
}
</style>